<template>
    <div class="flex-1">
        <section class="flex-1 goods-detail">
            <div class="flex-column">
                <div class="goods-bg">
                    <img :src="goodsDetail.img" alt="">
                </div>
                <div class="goods-h-msg flex-1 plr15 ptb10">
                    <h3 class="goods-title">{{goodsDetail.name}}</h3>
                    <div class="goods-price">礼包类型:{{giftHandler(goodsDetail.type)}}</div>
                    <div class="goods-price">
                        商城价:
                        <span class="mall-price price">
                            ¥
                            <em>{{computePrice(goodsDetail.amount)}}</em>
                        </span>
                    </div>
                </div>
            </div>
            <div style="padding-bottom: 20px; background:#fff">
                <h4 class="prds-detail-title plr15">礼包详情</h4>
                <table class="prds-table">
                    <tr style="height: 40px;">
                        <th width="50">#</th>
                        <th width="70">商品图片</th>
                        <th>商品名称</th>
                        <th width="80">零售价</th>
                    </tr>
                    <tr v-for="prds in goodsDetail.prds" style="height: 70px;">
                        <td width="50">{{prds.id}}</td>
                        <td>
                            <img :src="prds.img" alt="" width="50" height="50">
                        </td>
                        <td style="padding: 0 10px;">{{prds.name}}</td>
                        <td width="80">{{computePrice(prds.price)}}</td>
                    </tr>
                </table>
            </div>
        </section>
        <van-goods-action>
            <van-goods-action-mini-btn
                icon="cart-o"
                text="购物车"
                :info="cartNum?cartNum:''"
                @click="$router.push({name:'shopping'})"
            />
            <van-goods-action-big-btn text="立即购买" @click="buy"/>
        </van-goods-action>
    </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
    name: "GoodsDetail",
    data() {
        return {
            goodsDetail: {},
            active: 0
        };
    },
    computed: {
        ...mapGetters(["cartNum"])
    },
    created() {
        this.getGoodsDetail();
    },
    methods: {
        giftHandler(type) {
            switch (type) {
                case 0:
                    return "店主礼包";
                case 1:
                    return "合伙人礼包";
                case 2:
                    return "升级礼包";
            }
        },
        getGoodsDetail() {
            let goodsId = this.$route.query.id;
            this.$store
                .dispatch(types.GIFT_GOODS_DETAIL, { id: goodsId })
                .then(res => {
                    console.log(res);
                    if (res.code !== 0) return;
                    this.goodsDetail = res.data;
                });
        },

        onAddCart(data) {
            this.$store.dispatch(types.CART_ADD, data).then(res => {
                console.log(res);
                if (res.code !== 0) return;
                this.success("添加成功");
            });
        },
        buy() {
            // this.$store.dispatch(types.INVEST_CHECKUSER, {
            //     name: this.userInfo.name,
            //     check_invest: true
            // }).then(res => {
            //     console.log(res)
            //     if (res.code !== 0) {
            //
            //     }
            //     return
            // })
            // return

            this.$store
                .dispatch(types.CART_PRE, { giftID: this.goodsDetail.id })
                .then(res => {
                    console.log(res);
                    if (res.code !== 0) return this.fail(res.msg);
                    res.giftID = this.goodsDetail.id;
                    this.$store.commit(types.SET_CART_SUBMIT, res);
                    this.$router.push({
                        name: "shopping-submit",
                        query: { type: this.goodsDetail.type }
                    });
                });
        }
    }
};
</script>

<style scoped lang="scss">
.goods-detail {
    padding-bottom: 50px;
    overflow: auto;
}

.goods-bg {
    width: 100%;
    height: 375px;
    img {
        width: 100%;
        height: 100%;
    }
}

.goods-title {
    font-size: 18px;
    font-weight: bold;
}

.goods-h-msg {
    background: #fff;
}

.goods-shop {
    font-size: 12px;
    height: 25px;
}

.mall-price {
    color: $theme-color;
    margin-right: 10px;
}

.mall-price em {
    font-size: 20px;
}

.old-price {
    color: #666;
    margin-right: 20px;
}

.marker-price {
    color: #666;
}

.goods-desc {
    height: 100px;
    width: 100%;
    background: #fff;
    h3 {
        border-bottom: 1px solid #efefef;
        height: 40px;
    }
}

.custom-icon {
    display: flex !important;
}

.evaulate-box {
    background: #fff;
}

.evaulate-item {
    border-bottom: 1px solid #efefef;
    &:last-child {
        border-bottom: 0;
    }
}

.goods-evaluate {
    padding-bottom: 50px;
}

.evaulate-msg {
    padding-top: 10px;
    font-size: 14px;
}

.gift-table-pic {
    width: 70px;
    height: 70px;
}

.prds-table {
    margin: 0 15px 20px;
}

tr {
    border: 1px solid #f7f7f7;
}

th,
td {
    border: 1px solid #f7f7f7;
    text-align: center;
}

.prds-detail-title {
    font-size: 14px;
    margin-bottom: 10px;
}
</style>
